<template>
  <div class="strategy">
    <div class="wrapper">

      <div class="list">
        <div
          v-for="(item, index) in list"
          :key="item.id"
          class="detail">
          <i-swipeout
            :operateWidth="0"
            :unclosable="false"
            :toggle="false">
            <div class="list-swipeout" slot="content" @tap="detailClick(item)">
              <div class="info">
                <div class="title">{{item.title}}</div>
                <div class="content">
                  <div class="img">
                    <img mode="aspectFit" :src="item.img" />
                  </div>
                  <div class="desc">{{item.desc}}</div>
                </div>
                <div class="time">
                  {{item.time}}
                </div>
              </div>
            </div>
          </i-swipeout>
        </div>
      </div>

      <div class="loadingMore">
        <i-load-more v-if="isLoadingMore" />
        <div
          v-if="isNoMoreData"
          class="noMoreData">没有更多数据了</div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { ERR_OK, pageSize } from 'api/config'
import { getList } from 'api/strategy'
import { shareMixin } from 'common/js/mixins'
import list from './modules'

export default {
  mixins: [shareMixin()],
  onShow () {
    // this.page = 1
    // this.getList('init', true)
  },
  onPullDownRefresh () {
    // this.page = 1
    // this.getList('init', false)
    setTimeout(() => {
      wx.stopPullDownRefresh()
    }, 1000)
  },
  onReachBottom () {
    // this.getMoreList()
  },
  mounted () {
    // this.initData()
  },
  data () {
    return {
      page: 1,
      list: list,
      isLoadingMore: false,
      isNoMoreData: true
    }
  },
  methods: {
    initData () {
      // this.isNoMoreData = false
      // this.list = []
      this.list = list
    },
    detailClick (item) {
      this.SET_CURRENTITEM(item)
      wx.navigateTo({
        url: '/pages/strategyDetail/main'
      })
    },
    getMoreList () {
      if (this.isNoMoreData) {
        return
      }
      this.isLoadingMore = true
      this.page += 1
      this.getList('more', false)
    },
    async getList (type = 'init', isShowLoading = true) {
      if (isShowLoading) {
        this.$showLoading('加载中')
      }

      const res = await getList(this.page)

      if (isShowLoading) {
        wx.hideLoading()
      } else {
        wx.stopPullDownRefresh()
      }

      if (res.code === ERR_OK) {
        if (type === 'init') {
          this.list = res.rows
          this.isNoMoreData = false
          this.isLoadingMore = false
        } else if (type === 'more') {
          this.list = [...this.list, ...res.rows]
          this.isLoadingMore = false
        }

        if (res.rows.length < pageSize) {
          this.isNoMoreData = true
        }
      }
    },
    ...mapMutations({
      SET_CURRENTITEM: 'strategyDetail/SET_CURRENTITEM'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .strategy {
    width: 100%;
    height: 100%;
    position: relative;
    > .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      > .list {
        width: 100%;
        > .detail {
          .list-swipeout {
            > .info {
              color: black;
              > .title {
                width: 100%;
                font-size: 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              > .content {
                width: 100%;
                display: flex;
                margin: 5px 0;
                > .img {
                  flex: 0 0 90px;
                  > img {
                    width: 100%;
                    height: 60px;
                  }
                }
                > .desc {
                  flex: 1;
                  height: 60px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 3;
                  overflow: hidden;
                  white-space: pre-wrap;
                  font-size: 16px;
                  color: gray;
                  margin-left: 10px;
                }
              }
              > .time {
                font-size: 14px;
                color: lightgray;
              }
            }
          }
          .detail-btn {
            height: 100%;
            display: flex;
            > .btn {
              flex: 1;
              height: 100%;
              background-color: $color-default;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
</style>
